<template>
    <button @click="showRef=true">展示</button>    
    <!-- to='body' 属性可以将组件渲染到任意元素中，样式不受影响 -->
     <teleport to='body'>
        <!-- 用showRef变量控制整体 -->
        <div class="pop_up" v-show="showRef">
            <h1>title</h1>
            <p>content</p>
            <button @click="showRef=false">关闭</button>    
        </div>
     </teleport>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
let showRef = ref(false);
</script>
<style>
.pop_up{
    width: 20vw;
    height: 50v;
    position: fixed;
    left: 50%;
    background-color: greenyellow;
}
</style>